<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>章节测验</title>

    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="css/test.css" rel="stylesheet" type="text/css"/>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/index.js"></script>
    <script src="js/axios.js"></script>

    <script>


    </script>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }
        .el-message-box__wrapper::after{
            height: 40%;
        }
    </style>

</head>
<body>
<div  id="app" class="panel-body" style="height: 800px; overflow:scroll">
    <!--nr start-->
    <div class="test_main" :data="tableData" style="border: 1px  #000000; width: 90%; margin: 0 auto;">

        <div class="nr_left">
            <div class="test">
                <form action="" method="post">

                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>最终得分为:<span style="margin-left:20px;color: red">{{finalScore}}分</span></h2>
                            <el-button  style="float: right" @click="rollbacktest">返回</el-button>
                            <el-button  type="primary" style="float: right;margin-right: 20px" @click="endtest">提交</el-button>

                        </div>
                       <!-- <div class="test_title">
                            <font><input type="button" name="test_jiaojuan" value="提交" @click="endtest"></font>
                        </div>-->
                    </div>
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                        </div>
                    </div>
                    <div class="test_content_nr">

                        <ul>

                            <li :id="forId(index)" v-for="(site,index) in radiorubricList">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>
                                <div class="test_content_nr_main">
                                    <el-radio-group v-model="site.answerId">
                                        <ul>
                                            <li class="option" v-for="siteexamanswers in site.examanswers"
                                                @change="radioTest(site)">

                                                <el-radio :label="siteexamanswers.id" border >
                                                    {{siteexamanswers.optiones}}.{{siteexamanswers.content}}
                                                </el-radio>
                                                <!--<input type="radio" class="radioOrCheck" :name="forId(index)"
                                                       @click="radioTest(site,siteexamanswers)"
                                                />
                                                <label>
                                                    {{siteexamanswers.optiones}}.
                                                    <p class="ue" style="display: inline;">{{siteexamanswers.content}}</p>
                                                </label>-->
                                            </li>

                                        </ul>

                                    </el-radio-group>
                                    <span v-for="iteam in answerIdlist" v-if="iteam.id==site.id"><h2 style="color: red">正确答案为: {{iteam.answerId}}</h2>

                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>


                    <!-------------------------------------------------------------------------------------------->
                    <!--多选题-->
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>多选题</h2>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>

                            <li :id="forIdduxuan(index)" v-for="(site,index) in duorubricList">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>

                                <div class="test_content_nr_main"><!--@mouseleave="leave() "-->

                                    <el-checkbox-group v-model="site.answerId">

                                        <ul>

                                            <li class="option" v-for="siteexamanswers in site.examanswers"
                                            >
                                                <!--  <input type="checkbox" class="radioOrCheckduo" :name="forIdduxuan(index)"
                                                          :value="siteexamanswers.id" v-model="net_car"
                                                   />-->

                                                <el-checkbox :label="siteexamanswers.id" border
                                                             @change="duoxuanTest(site)">
                                                    {{siteexamanswers.optiones}}.{{siteexamanswers.content}}
                                                </el-checkbox>

                                            </li>


                                        </ul>
                                    </el-checkbox-group>
                                    <span v-for="iteam in answerIdlist" v-if="iteam.id==site.id"><h2 style="color: red">正确答案为: {{iteam.answerId}}</h2>

                                    </span>
                                </div>
                            </li>


                        </ul>
                    </div>
                    <!--判题-->
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>判断题</h2>
                        </div>

                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <li :id="forIdpanduan(index)" v-for="(site,index) in judgerubricList">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>
                                <div class="test_content_nr_main">
                                    <el-radio-group v-model="site.answerId" @change="panduanTestdui(site)" >

                                        <el-radio label="正确" border >正确</el-radio>
                                        <el-radio label="错误" border>错误</el-radio>
                                    </el-radio-group>
                                    <span v-for="iteam in answerIdlist" v-if="iteam.id==site.id"><h2 style="color: red">正确答案为: {{iteam.answerId}}</h2>

                                    </span>
                                    <!-- <input type="radio" class="radioOrCheckpanduan" :name="forIdpanduan(index)"
                                            @click="panduanTestdui(site)"
                                     />
                                     <label>
                                         <p class="ue" style="display: inline;">正确</p>
                                     </label>
                                 </li>
                                 <li class="option">

                                     <input type="radio" class="radioOrCheckpanduan" :name="forIdpanduan(index)"
                                            @click="panduanTestcuo(site)"
                                     />
                                     <label>
                                         <p class="ue" style="display: inline;">错误</p>
                                     </label>-->


                                </div>
                            </li>


                        </ul>
                    </div>
                    <!--填空题-->
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>填空题</h2>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <li :id="forIdtiankong(index)" v-for="(site,index) in packrubricList">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><span>({{site.score}}分)</span>
                                    <font>{{site.content}}</font>
                                </div>
                                <div class="test_content_nr_main">
                                    答案:
                                    <el-input
                                            type="textarea"
                                            v-model="site.answerId"
                                            autosize
                                            placeholder="请输入答案"
                                            @change="tiankongtest(site)"
                                    >
                                    </el-input>
                                    每个空的答案用逗号隔开,比如:Javaweb,Javaoop,Mybatis
                                    <span v-for="iteam in answerIdlist" v-if="iteam.id==site.id"><h2 style="color: red">正确答案为: {{iteam.answerId}}</h2>

                                    </span>
                                </div>
                            </li>


                        </ul>
                    </div>

                </form>
            </div>

        </div>
    </div><!--nr end-->
    <div class="foot"></div>

    <!--考试结束对话框-->
    <el-dialog
            title="考试结束"
            :visible.sync="centerDialogVisible"
            width="30%"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            center>
        <span>考试已结束,最终得分为:<h2 style="color: red">{{finalScore}}</h2></span>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="kaoshijieshu">确 定</el-button>
  </span>
    </el-dialog>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="js/jquery.countdown.js"></script>
<script>
    window.jQuery(function ($) {
        "use strict";
        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });
    });

    function parseUrl() {
        var url = location.href;
        var i = url.indexOf('?');
        if (i == -1) return;
        var querystr = url.substr(i + 1);
        var arr1 = querystr.split('&');
        var arr2 = new Object();
        for (i in arr1) {
            var ta = arr1[i].split('=');
            arr2[ta[0]] = ta[1];
        }
        return arr2;
    }

    var v = parseUrl();//解析所有参数
    axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
    let userid = sessionStorage.getItem("userid");
    var courseid = sessionStorage.getItem("courId");
  var app=  new Vue({
        el: "#app",
        data: {
            //最终得分

            finalScore: "",
            centerDialogVisible: false,
            iszouti:true,
            answerIdlist: [],
            /* /!*倒计时*!/
             keepTime: '倒计时',
             limittime: '',
             settime: '',
             flag: false,*/
            /*倒计时*/
            tableData: [{}],
            //radionum: "",
            // duorubricnum: '',
            // panduantinum: '',
            // tiankongnum: '',
            daoTime: "",
            radiorubricList: [{}],
            duorubricList: [{}],
            packrubricList: [{}],
            judgerubricList: [{}],
            //倒计时
            time: null


        },
        mounted: function () {
            this.query();
            // this.querycourse();
            /* this.queryrubric();*/

        },
        methods: {
            rollbacktest() {
                window.location.href = "/exam/Chaptertest.html"
            },
            /*确认考试结束*/
            kaoshijieshu() {
                this.centerDialogVisible = false;
                // window.location.href = "/exam/StudentTest.html?"
            },
            /*点击交卷*/
            endtest() {
                this.$confirm('是否提交测试?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.secondStep();
                })
            },
             /*交卷前睡一秒*/
            secondStep() {
                setTimeout(function(){
                    console.log("倒计时")
                    let params = new URLSearchParams();
                    params.append("studentId", userid);
                    params.append("examparperId",app.tableData.id);
                    axios({
                        method: 'post',
                        url: '/api/exam/Sectionrubric/examination',
                        data: params,
                    }).then(res => {
                        app.finalScore = res.data.remark;
                        app.answerIdlist=res.data.remark2;
                        // this.centerDialogVisibledanxaun=true;
                        app.iszouti=false;
                    })}, 1500);

            },

            query() {
                 let chapterId = v['chapterId'];
                let section = v['section'];

                 let params = new URLSearchParams();
                 params.append("examparper", chapterId);//章节测试id
                 params.append("course", courseid);//课程id
                 params.append("studentid", userid);//学生ID
                 params.append("section", section);//章节id

                axios({
                    method: 'post',
                    url: '/api/exam/Sectionrubric/querysectionrubricer',
                    data: params,

                }).then(res => {
                    this.radiorubricList = res.data.radiorubricList;
                    this.duorubricList = res.data.duorubricList;
                    /*map(item => {
                                            item.checks = [];
                                            return item;
                                        });*/
                    this.packrubricList = res.data.packrubricList;
                    this.judgerubricList = res.data.judgerubricList;
                    this.tableData = res.data.parpercontent;
                    /* this.radionum = res.data.parpercontent.radionum;
                     this.duorubricnum = res.data.parpercontent.multiplenum;
                     this.panduantinum = res.data.parpercontent.judgenum;
                     this.tiankongnum = res.data.parpercontent.fillnum;*/
                    //this.limittime = res.data.downtime;
                    console.log("时间" + this.limittime);
                    // this.StartCountDown();
                    for (let index in this.duorubricList) {
                        if (this.duorubricList[index].answerId != null) {
                            this.duorubricList[index].answerId = this.duorubricList[index].answerId.split(",");
                        } else {
                            this.duorubricList[index].answerId = [];
                        }

                        console.log("85123+" + this.duorubricList[index].answerId);
                    }
                })
            },
            /*点击单选按钮*/
            radioTest(site) {
                if (this.iszouti==true){
                    let params = new URLSearchParams();
                    params.append("studentId", userid);
                    params.append("examparperId", this.tableData.id);
                    params.append("examrubricId", site.id);
                    params.append("score", site.score);
                    params.append("selectanswerId", site.answerId);
                    params.append("courseid", this.tableData.courseId);//课程id
                    params.append("sectionid", this.tableData.sectionId);//章节id

                    axios({
                        method: 'post',
                        url: '/api/exam/Sectionrubric/examend',
                        data: params,

                    }).then(res => {
                        console.log(res);

                    })
                } else{

                    this.$notify({
                        title: '失败',
                        message:"已经提交测试不能做题,请刷新试卷",
                        type: 'warning'
                    });
                }

            },
            /*点正确按钮*/
            panduanTestdui(site) {
                if (this.iszouti==true){
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("score", site.score);
                params.append("examrubricId", site.id);
                params.append("selectanswerId", site.answerId);
                    params.append("courseid", this.tableData.courseId);//课程id
                    params.append("sectionid", this.tableData.sectionId);//章节id
                axios({
                    method: 'post',
                    url: '/api/exam/Sectionrubric/examend',
                    data: params,

                }).then(res => {
                    console.log(res);

                })
                } else{

                    this.$notify({
                        title: '失败',
                        message:"已经提交测试不能做题,请刷新试卷",
                        type: 'warning'
                    });
                }
            },
            /*点错误按钮*/
            panduanTestcuo(site) {
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("score", site.score);
                params.append("examrubricId", site.id);
                params.append("selectanswerId", "错误");
                params.append("courseid", courseid);
                axios({
                    method: 'post',
                    url: '/api/exam/Sectionrubric/examend',
                    data: params,

                }).then(res => {
                    console.log(res);

                })
            },
            /*填空更改之后触发*/
            tiankongtest(site) {
                if (this.iszouti==true){
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("score", site.score);
                params.append("examrubricId", site.id);
                params.append("selectanswerId", site.answerId);
                    params.append("courseid", this.tableData.courseId);//课程id
                    params.append("sectionid", this.tableData.sectionId);//章节id
                axios({
                    method: 'post',
                    url: '/api/exam/Sectionrubric/examend',
                    data: params,

                }).then(res => {

                    console.log(res);
                })
            } else{

                this.$notify({
                title: '失败',
                message:"已经提交测试不能做题,请刷新试卷",
                type: 'warning'
            });
    }
            },
            /*多选题*/
            duoxuanTest(site) {
                if (this.iszouti==true){
                let params = new URLSearchParams();
                params.append("studentId", userid);
                params.append("examparperId", this.tableData.id);
                params.append("examrubricId", site.id);
                params.append("score", site.score);
                params.append("selectanswerId", site.answerId);
                    params.append("courseid", this.tableData.courseId);//课程id
                    params.append("sectionid", this.tableData.sectionId);//章节id
                axios({
                    method: 'post',
                    url: '/api/exam/Sectionrubric/examend',
                    data: params,

                }).then(res => {

                    console.log(res);
                })
                } else{

                    this.$notify({
                        title: '失败',
                        message:"已经提交测试不能做题,请刷新试卷",
                        type: 'warning'
                    });
                }
            },

            /* /!*倒计时*!/
             StartCountDown() {
                 /!*  var mydate = new Date();
                     mydate.setMinutes(mydate.getMinutes() + this.limittime);
                     this.settime=this.limittime;
     *!/
                 this.time = setInterval(() => {
                     this.timeDown();
                 }, 1000)
             },

             timeDown() {
                 //const endTime = new Date(this.settime);
                 const nowTime = new Date();
                 let leftTime = parseInt((this.limittime - nowTime.getTime()) / 1000);
                 // let d = parseInt(leftTime / (24 * 60 * 60));
                 let h = this.formate(parseInt(leftTime / (60 * 60) % 24));
                 let m = this.formate(parseInt(leftTime / 60 % 60));
                 let s = this.formate(parseInt(leftTime % 60));
                 if (leftTime <= 0) {
                     clearInterval(this.time)
                     this.endtest();
                     /!*     let params = new URLSearchParams();
                          params.append("studentId", userid);
                          params.append("examparperId", this.tableData.id);
                          params.append("courseid", courseid);
                          axios({
                              method: 'post',
                              url: '/api/exam/examrubric/examination',
                              data: params,
                          }).then(res => {
                              this.finalScore=res.data.remark;
                              this.centerDialogVisible = true;
                          })*!/
                 }
                 this.keepTime = `${h}:${m}:${s}`;
             },
             formate(time) {
                 if (time >= 10) {
                     return time
                 } else {
                     return `0${time}`
                 }
             },
             /!*倒计时*!/*/

            forId: function (index) {
                return "qu_0_" + index
            },
            forIdduxuan: function (index) {
                return "qu_1_" + index
            },
            forIdpanduan: function (index) {
                return "qu_2_" + index
            }, forIdtiankong: function (index) {
                return "qu_3_" + index
            },
            forIdd: function (index) {
                return "#qu_0_" + index
            },
            forIddduoxuan: function (index) {
                return "#qu_1_" + index
            },
            forIdpanduanp: function (index) {
                return "#qu_2_" + index
            }, forIdtiankongtt: function (index) {
                return "#qu_3_" + index
            }

        }
    })

</script>
</body>
</html>
